<template>
	<Page :config='pageConfig'>
		
	</Page>
	<FormModal ref='formModalRef1' :config='formModalConfig' />
	<FormModal ref='formModalRef2' />
</template>

<script setup>
	const Page		= $.lazy(()=>import('#tp/content/page-content.vue'))
	const FormModal	= $.lazy(()=>import('#cpt/temp/FormModal.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	const formModalConfig = {
		title 		: '弹窗表单',
		width 		: '40%',
		labelWidth 	: 's5',
		api 		: '/submitApi', 					// 提交接口
		infoApi 	: '/infoApi', 						// 回显接口
		destroy		: false,							// 不销毁弹窗
		data:[
			{ label:'Vue',  name:'vue' },
			{ label:'React', name:'react' },
		],
		onInit: ({ ref, formRef, modalRef, param }) => {
			ref.setValue({ vue:'13' })
		},
		controls: {
			ok: { label: '提交' },
			cancel: { label:'我要取消', danger:true },
			onCancel: close => {
				return true
			},
			after: [
				{ mode:'ex'},
				{ label:'后置按钮' },
			],
			before: [
				{ label:'前置按钮', disabled:true }
			]
		}
	}
	let formModalRef1 = $ref()
	let formModalRef2 = $ref()
	const pageConfig = {
		title: '局部弹窗表单',
		controls	: [
			{ label:'直接打开', click:()=>formModalRef1.open() },
			{ label:'打开配置', click:()=>formModalRef2.open(formModalConfig) },
		]
	}
</script>